<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>image-placeholder.js DEMO</title>
    <link rel="stylesheet" href="css/main.css">
    <style type="text/css">
        .text {
            margin:0;
            padding:5px;
            border:0;
            width:70px;
            height:20px;
            background:#eee;
            line-height:20px;
            outline:none;
        }
        .picker {
            margin:0;
            padding:5px;
            border:0;
            width:70px;
            height:20px;
            border-right:30px solid green;
            background:#eee;
            line-height:20px;
            outline:none;
        }
        #placeholder-generator img {
            margin:0 auto;
            display: block;
            max-width:100%;
        }
        .input-box {
            float: left;
            margin-left:15px;
            margin-right:15px;
        }
        .input-placeholder{
            display:block;
            font-size:24px;
            color:#666;
        }
        #select-fstyle option{
            color:#999;
            background: #eee;
            border:none;
        }
        .options li{
            padding:5px 10px;
        }
        .options li:hover {
            background: #1e90ff;
            color:#fff;
            cursor: pointer;
        }
        .options li {
            border-bottom:1px solid #eee;
        }
        #text {
            width:300px;
        }
    </style>
    <script type="text/javascript" src="js/placeholder.min.js"></script>

    <!--颜色选择-->
    <!--<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>-->
    <!--<script src="js/colpick.js" type="text/javascript"></script>-->
    <!--<link rel="stylesheet" href="css/colpick.css" type="text/css"/>-->
</head>

<body>
<div class="container">
    <div class="con">
        <div class="title"><h1><a href="../">placeholder.js</a></h1></div>
        <hr/>

        <h2>Image Generator</h2>
        <div id="placeholder-generator"><img id="generat-img"></div>
        <div class="clearfix" id="input-box" style="margin-bottom: 50px;">
            <div class="input-box">
                <span class="input-placeholder">Size:</span>
                <input placeholder="width" type="text" class="text" data-action="widthChange"/>
                <span>x</span>
                <input placeholder="height" type="text" class="text" data-action="heightChange"/>
            </div>
            <div class="input-box">
                <span class="input-placeholder">Bgcolor:</span>
                <input placeholder="background" type="text" class="picker" data-action="bgcolorChange"/>
            </div>
            <div class="input-box">
                <span class="input-placeholder">Color:</span>
                <input placeholder="textcolor" type="text" class="picker" data-action="colorChange"/>
            </div>

            <div class="input-box">
                <span class="input-placeholder">Text:</span>
                <input placeholder="text" type="text" id="text" class="text" data-action="textChange"/>
            </div>
        </div>
    </div>

</div>

<script>
//    $('.picker').colpick({
//        layout:'hex',
//        submit:0,
//        onChange:function(hsb,hex,rgb,el,bySetColor) {
//            $(el).css({'border-color':'#'+hex,color:'#'+hex});
//            if(!bySetColor) $(el).val(hex);
//            var actionName = $(el).data('action');
//            var action = actionList[actionName];
//            if ($.isFunction(action)) action(el,$(el).val());
//        }
//    }).keyup(function(){
//        $(this).colpickSetColor(this.value);
//    });

//    $(document).ready(function () {
//        actionList.render();
//    });

    var string = document.readyState;
    document.onreadystatechange = function ()
    {
        if (document.readyState == "loading")
        {
            console.log('当document文档正在加载时,返回"loading"');
        }
        if (document.readyState == "interactive")
        {
            console.log('当文档结束渲染但在加载内嵌资源时,返回"interactive"');
        }
        if (document.readyState == "complete")
        {
            console.log('当文档加载完成时,返回"complete"');
        }
        actionList.render();
        console.log(window.placeholder.getData(actionList.options));
    };


//    $('[data-action]').change(function () {
//        var actionName = $(this).data('action');
//        console.log(actionName);
//        var action = actionList[actionName];
//        if ($.isFunction(action)) action($(this),$(this).val());
//    });

    var actionList = {
        height:200,
        widht:200,
        options:{
            size: '200x200',
            bgcolor: '#ccc',
            color: '#147ec9',
            text: '200*200',
            fstyle:'oblique',
            fweight: 'bold',
            fsize:undefined,
            ffamily: 'consolas'
        },
        render:function(){
            document.getElementById('generat-img').setAttribute('src',window.placeholder.getData(actionList.options));
        }
    };
</script>
</body>

</html>
